<template>
	<view class="dec_swiper" :style="[decStyle]">
		<swiper class="swiper" :style="{height: decStyle.swiperHeight}" circular :indicator-dots="true" :autoplay="true" :interval="2000">
			<swiper-item class="swiper-item" v-for="img in imgList" :key="img.nanoid" @click="goTarget(img)">
				<image :style="{width: decStyle.swiperWidth, height: decStyle.swiperHeight}" :src="img.url" />
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			content: {
				type: Object,
				default: () => {}
			}
		},
		computed: {
			decStyle () {
				return {
					backgroundColor: this.content.bgColor || "transparent",
					padding: `${this.content.marginY * 2 || 0}rpx ${this.content.marginX * 2 || 0} rpx`,
					swiperHeight: `${this.content.height * 2 || 300}rpx`,
					swiperWidth: `${750-(this.content.marginX*4 || 0)}rpx`,
				}
			},
			imgList() {
				return this.content.imgs || [];
			}
		},
		methods: {
			goTarget(data) {
				if (!data || !data.linkUrl) return;
				if (data.linkType === 'linkMini') {
					uni.navigateToMiniProgram({
						appId: data.linkUrl,
						path: '/pages/index/index'
					})
				} else if (data.linkUrl === '/pages/my/my') {
					uni.switchTab({
						url: data.linkUrl
					})
				} else {
					uni.navigateTo({
						url: data.linkUrl
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dec_swiper {
		display: flex;
		width: 750rpx;
		box-sizing: border-box;
	}
	
	.swiper {
		width: 100%;
	}
	
	.swiper-item {
		width: 100%;
		height: 100%;
	}
</style>